<!-- src/views/Home.vue -->
<template>
  <el-form
     label-width="auto"
   >
  	<div class="supervisor-container">
  	<header class="title-section">
  	    <img src="@/assets/jhk-1719213427217.jpg" alt="背景图片" class="image"/>
		<h1>东软环保公众监督平台</h1>
		<h2>———公众监督员端———</h2>
  	</header>
	<div class="button-container">
	<el-button type="primary" @click="goToSubmitFeedback" class="supervisor-button">提交反馈信息</el-button>
	<el-button type="primary" @click="goToViewFeedbackHistory" class="supervisor-button">查看历史反馈信息</el-button>
  	</div>
	</div>
   </el-form>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
	const router = useRouter();
  let goToViewFeedbackHistory = () =>{
	router.push({
		path:'/supervisor/viewFeedbackHistory'
		});  
  }
  
  let goToSubmitFeedback = () =>{
  	router.push({
  		path:'/supervisor/submitFeedback'
  		});  
  }
  

</script>
<style scoped>
	.button-container {
	    display: flex;
	    justify-content: space-between;
	    margin-top: 20px;
		margin-bottom: 20px;
	  }
	.supervisor-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	  background-color: #e0f7fa; /* 蓝绿色背景色 */
	   min-height: 100vh;
	}
	.title-section {
	  text-align: center;
	  margin-bottom: 20px; 
	}
	
	h1, h2 {
	  color: green;
	}
	.supervisor-button {
	  background-color: #70b0bc; /* 蓝绿色按钮 */
	  border-color: #00796b;
	  width: 80%;
	  height: 50px;
	  border-radius: 8px;
	  /* margin-top: 20px; */
	  /* margin-bottom: 20px; */
	}
	.image {
	    display: block;
	    margin: auto;
		width: 100%;
	    height: auto;
	  }
</style>